<template>
  <div class="loginPage">
    <div class="loginBox">
      <!-- <img class="loginTitle" src="../../assets/login_title.png" alt="" /> -->
      <div class="title">用户登录</div>
      <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <!-- <el-form-item label="" prop="hid">
            <el-select v-model="ruleForm.hid" placeholder="请选择医院名称" clearable>
              <el-option v-for="item in hospitalList" :key="item.id + ''" :label="item.name" :value="item.id + ''"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="" prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入账号">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" autocomplete="off">
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox label="记住密码" name="type" v-model="ruleForm.type"></el-checkbox>
            <span class="forgetKey" @click="handleTip"><span style="margin-right: 8px;color: #cf6f6f;" v-show="isTip">*请联系管理员修改密码*</span>忘记密码？</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btn" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from "js-md5";
import { login, getParentList, getUserInfo } from "@/api/system";
export default {
  data() {
    return {
      ruleForm: {
        hid: "",
        username: "",
        password: "",
        type: false,
      },
      rules: {
        // hid: [{ required: true, message: "请选择医院名称", trigger: "change" }],
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      hospitalList: [], // 医院列表
      allHospitalList: [],
      isTip: false,
    };
  },
  // created() {
  //   this.getHospitalList();
  // },
  mounted() {
    let username = window.localStorage.getItem("username");
    let password = window.localStorage.getItem("password");
    let hid = window.localStorage.getItem("hid");
    let type = window.localStorage.getItem("type");
    this.ruleForm.hid = hid;
    if (username && password) {
      this.ruleForm.username = username;
      this.ruleForm.password = password;
      this.ruleForm.type = type == "true" ? true : false;
    }
  },
  methods: {
    handleTip() {
      this.isTip = true;
    },
    // 获取医院列表
    getHospitalList() {
      getParentList().then((res) => {
        this.hospitalList = res.data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // let password = md5(md5(this.ruleForm.password) + "bby");
          login({
            hid: this.ruleForm.hid,
            password: this.ruleForm.password,
            username: this.ruleForm.username,
          })
            .then((res) => {
              if (this.ruleForm.type == true) {
                window.localStorage.setItem("password", this.ruleForm.password);
                window.localStorage.setItem("type", "true");
              } else {
                window.localStorage.removeItem("password");
                window.localStorage.removeItem("type");
              }

              window.localStorage.setItem("hid", this.ruleForm.hid);
              window.localStorage.setItem("username", this.ruleForm.username);
              window.localStorage.setItem("token", res.data.token);
              window.localStorage.setItem("roleId", res.data.roleId);
              window.localStorage.setItem("userType", res.data.userType);
              if (this.$route.query && this.$route.query.redirect) {
                this.$router.push({
                  path: this.$route.query.redirect,
                });
              } else {
                this.$router.push({
                  path: `/clothesDetail/workUniformInventoryRecord`,
                });
                // 获取用户权限
                // this.getAuthority();
              }
            })
            .catch((err) => {
              console.log("登录失败", err);
            });
        }
      });
    },
    // 获取用户权限
    getAuthority() {
      getUserInfo().then((res) => {
        if (res.code == 200) {
          let group_id = res.data.group_id;
          // 缓存权限数组
          window.localStorage.setItem("permissionsArr", JSON.stringify(group_id));
          // 延迟跳转首页
          setTimeout(() => {
            this.$router.push({
              path: `/home/home`,
            });
          }, 500);
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.loginPage {
  background-image: url("../../assets/login_bg2.png");
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  width: 800px;
  height: 364px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  width: 36%;
  height: 100%;
  background: #fff;
  line-height: 324px;
}

.logo img {
  width: 200px;
}

.loginBox {
  width: 455px;
  height: 453px;
  // background-image: url("../../assets/login_bottom.png");
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 800px;
  align-items: center;
  background-color: white;
  border-radius: 10px;
}
// /deep/ .el-checkbox__label{
//   color: #8080ff !important;
// }

.title {
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 300;
  margin-top: 15px;
  color: black;
  opacity: 0.88;
}

.demo-ruleForm {
  margin-bottom: 50px;
  .el-input {
    width: 392px;
    height: 40px;
    // border: 2px solid #2756d5 !important;
    border-radius: 4px !important;
    color: white !important;
    // background-color: #2439d0 !important;
  }
}

.btn {
  width: 100%;
}
.forgetKey {
  float: right;
  color: #409eff;
  cursor: pointer;
}
.loginTitle {
  width: 336px;
  height: 30px;
  margin-top: 50px;
}
</style>
